<template>
  <div>
    <header-main :left-arrow="leftArrow" :fixed="fixed" :title="title" class="bg-nav"></header-main>
    <van-index-bar :index-list="indexList" class="padding-bottom-56 " :sticky="sticky" highlight-color="#000">
      <van-index-anchor index="↑" style="height:0px"  class="padding-top-46" >
        &nbsp;
      </van-index-anchor>
      <van-cell :border="border" :center="center" :clickable="clickable">
        <div class="address_line">
          <img src="./../../assets/img/new_friends.png"/>
          <span class="address_line_name">新的朋友</span>
        </div>
      </van-cell>
      <van-cell :border="border" :center="center" :clickable="clickable">
        <div class="address_line">
          <img src="./../../assets/img/group_chat.png"/>
          <span class="address_line_name">群聊</span>
        </div>
      </van-cell>
      <van-cell :border="border" :center="center" :clickable="clickable">
        <div class="address_line">
          <img  src="./../../assets/img/tag.png"/>
          <span class="address_line_name">标签</span>
        </div>
      </van-cell>
      <van-cell :border="border" :center="center" :clickable="clickable">
        <div class="address_line">
          <img src="./../../assets/img/public_chat.png"/>
          <span class="address_line_name">公众号</span>
        </div>
      </van-cell>
      <div v-for="(value,key,index) in myFriends" :key="index">
        <van-index-anchor :index="key" class="bg-nav my-style"/>
        <van-cell :border="border" :center="center" :clickable="clickable"
                  v-for="val,i in value"
                  :key="i"
                  @click="talk(val.id,val.nickname)"
        >
          <div class="address_line">
            <img src="./../../assets/img/head_1.jpeg"/>
            <span class="address_line_name">{{val.nickname}}</span>
          </div>
        </van-cell>
      </div>
<!--      <van-index-anchor index="B" />-->
<!--      <van-cell :border="border" :center="center">-->
<!--        <div class="address_line">-->
<!--          <img src="./../../assets/img/head_1.jpeg"/>-->
<!--          <span class="address_line_name">轻舞飞扬</span>-->
<!--        </div>-->
<!--      </van-cell>-->
<!--      <van-cell :border="border" :center="center">-->
<!--        <div class="address_line">-->
<!--          <img src="./../../assets/img/head_2.jpeg"/>-->
<!--          <span class="address_line_name">夏沫紫晶</span>-->
<!--        </div>-->
<!--      </van-cell>-->
<!--      <van-cell :border="border" :center="center">-->
<!--        <div class="address_line">-->
<!--          <img src="./../../assets/img/head_3.png"/>-->
<!--          <span class="address_line_name">H.L</span>-->
<!--        </div>-->
<!--      </van-cell>-->
<!--      <van-cell :border="border" :center="center">-->
<!--        <div class="address_line">-->
<!--          <img src="./../../assets/img/head_2.jpeg"/>-->
<!--          <span class="address_line_name">夏沫紫晶</span>-->
<!--        </div>-->
<!--      </van-cell>-->
      </van-index-bar>
  </div>
</template>

<script>
  import headerMain from '../common/header-main'
  import addressService from './address-service.js'

  import pinyin from 'js-pinyin'

  import Vue from 'vue';
  import { IndexBar, IndexAnchor ,Cell,Image} from 'vant';

  Vue.use(IndexBar).use(IndexAnchor).use(Cell).use(Image);
  export default {
    components:{
      headerMain
    },
    data(){
      return{
        //是否显示边框
        border:true,
        center:true,
        //右边导航
        indexList:['↑','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','#'],
        //这个是给重新组装数据用的  不包含 '↑'
        pin:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','#'],
        //是否开启点击反馈
        clickable:true,
        //顶部导航配置 start
        title:'通讯录',
        leftArrow:false,
        fixed:true,
        //顶部导航配置 end
        //是否自动吸顶
        sticky:false,
        // 排序 分类后 的 通讯录好友列表
        myFriends:{},
      }
    },
    methods:{
      talk:function(friendId,nickname){
        // 使用  params 必须使用 路由 name 用 this.$route.params.userId 接收
        this.$router.push({
          name: 'talking',
          params: {
            friendId: friendId,
            nickname:nickname
          }
        })
      },
      initMyFriends:function () {
        let data={

        };
        //没有参数就传个空的
        addressService.getMyFriends(data).then(result =>{
          let res = result.data;
          if(res.code == '0'){
            //通讯录排序
            this.sort(res.result);
          }else{
            //用户名或者密码错误！
            Dialog.alert({
              message: res.msg
            }).then(() => {
              // on close
            });
          }
        }).catch(err => {

        }).finally(()=>{

        })
      },
      sort:function(myFriendsData){
        let addressFriend = [];
        for (var i = 0; i < myFriendsData.length; i++) {
          //遍历数组,拿到城市名称
          let nickname = myFriendsData[i].nickname;
          // pinyin 插件用法
          // console.log(pinyin.getFullChars('管理员')) //GuanLiYuan;
          // console.log(pinyin.getCamelChars('管理员')) //GLY;
          // console.log(pinyin.getCamelChars('1234')) //1234;
          // console.log(pinyin.getCamelChars('杨'))  //Y;
          //取全部城市的首字母
          let fristName = pinyin.getCamelChars(nickname).substring(0, 1);    //这里截取首字母的第一位
          var reg = /^[a-zA-Z]+$/;
          //这个插件 只能返回是汉字的大写首字母  如果首字 是小写字母则会返回 小写 这里转成大写  如果不是汉字和字母 就归类到 #
          if(reg.test(fristName)){
            fristName=fristName.toLocaleUpperCase();
          }else{
            fristName='#';
          }
          //给原json添加首字母键值对
          myFriendsData[i].first = fristName;
          //放入新数组
          addressFriend.push(myFriendsData[i]);
        }
        var list = {};
        //根据首字母键值对给原数据按首字母分类
        for (var j = 0; j < this.pin.length; j++) {    //这里的 pin 是一个写入了所有字母的数组,见 data 中
          console.log("this.pin:"+this.pin.length)
            let pinyin=[];
            for(var k = 0; k < addressFriend.length; k++){
              if(addressFriend[k].first === this.pin[j]){
                pinyin.push(addressFriend[k]);
              }
            }
            //没有 的字母 就排除
            if(pinyin.length!=0){
              list[this.pin[j]] = pinyin;
            }
        }
        this.myFriends=list;
      }
    },
    mounted () {
        this.initMyFriends();
    }
  }
</script>

<style scoped>

  .address_line{
    display: flex;
    align-items: center;
  }
  .address_line img{
    width: 36px;
    height: 36px;
    border-radius: 3px;
  }
  .address_line_name{
    font-size: 16px;
  /* font-family: sans-serif; */
    font-weight: inherit;
    margin-left: 16px;
  }
  .my-style >>> .van-index-anchor{
    line-height: 26px;
    font-size: 12px;
  }
</style>
